<template>
  <div class="network-demo-page">
    <div class="page-header">
      <div class="header-content">
        <h2>网络关系可视化演示</h2>
        <p>展示不同图形库和交互功能的网络可视化效果</p>
      </div>
    </div>

    <!-- 功能演示区域 -->
    <a-row :gutter="[24, 24]">
      <!-- 图形库对比 -->
      <a-col :xs="24" :lg="12">
        <a-card title="图形库对比" :bordered="false">
          <NetworkGraphSelector
            :data="demoData"
            :width="400"
            :height="300"
            :show-performance-monitor="true"
            @node-click="handleNodeClick"
            @edge-click="handleEdgeClick"
            @library-change="handleLibraryChange"
          />
        </a-card>
      </a-col>

      <!-- 交互功能演示 -->
      <a-col :xs="24" :lg="12">
        <a-card title="交互功能" :bordered="false">
          <NetworkTopologyInteraction
            :data="demoData"
            :graph-ref="graphRef"
            @interaction-mode-change="handleInteractionModeChange"
            @selection-change="handleSelectionChange"
            @path-highlight="handlePathHighlight"
            @community-highlight="handleCommunityHighlight"
          />
        </a-card>
      </a-col>

      <!-- 网络统计 -->
      <a-col :xs="24">
        <a-card title="网络统计分析" :bordered="false">
          <NetworkStatistics
            :statistics="networkStatistics"
            :node-data="demoData.nodes"
            :edge-data="demoData.edges"
          />
        </a-card>
      </a-col>

      <!-- 功能特性展示 -->
      <a-col :xs="24">
        <a-card title="功能特性" :bordered="false">
          <a-row :gutter="[16, 16]">
            <a-col :xs="24" :sm="12" :md="6">
              <div class="feature-item">
                <div class="feature-icon">
                  <experiment-outlined />
                </div>
                <h4>多引擎支持</h4>
                <p>支持ECharts和G6两种图形引擎，满足不同场景需求</p>
              </div>
            </a-col>
            <a-col :xs="24" :sm="12" :md="6">
              <div class="feature-item">
                <div class="feature-icon">
                  <interaction-outlined />
                </div>
                <h4>丰富交互</h4>
                <p>缩放、拖拽、筛选、高亮等多种交互方式</p>
              </div>
            </a-col>
            <a-col :xs="24" :sm="12" :md="6">
              <div class="feature-item">
                <div class="feature-icon">
                  <fund-outlined />
                </div>
                <h4>网络分析</h4>
                <p>中心性分析、社区检测、路径查找等分析功能</p>
              </div>
            </a-col>
            <a-col :xs="24" :sm="12" :md="6">
              <div class="feature-item">
                <div class="feature-icon">
                  <dashboard-outlined />
                </div>
                <h4>性能监控</h4>
                <p>实时监控渲染性能和内存使用情况</p>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>

      <!-- 使用示例 -->
      <a-col :xs="24">
        <a-card title="使用示例" :bordered="false">
          <a-tabs>
            <a-tab-pane key="basic" tab="基础使用">
              <pre><code>{{ basicUsageCode }}</code></pre>
            </a-tab-pane>
            <a-tab-pane key="advanced" tab="高级配置">
              <pre><code>{{ advancedUsageCode }}</code></pre>
            </a-tab-pane>
            <a-tab-pane key="events" tab="事件处理">
              <pre><code>{{ eventHandlingCode }}</code></pre>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>

    <!-- 关系详情弹窗 -->
    <RelationshipModal
      v-model:visible="relationshipModalVisible"
      :relationship="selectedRelationship"
      @updated="handleRelationshipUpdated"
      @deleted="handleRelationshipDeleted"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  ExperimentOutlined,
  InteractionOutlined,
  FundOutlined,
  DashboardOutlined
} from '@ant-design/icons-vue'
import {
  NetworkGraphSelector,
  NetworkTopologyInteraction,
  NetworkStatistics,
  RelationshipModal
} from '@/components/NetworkGraph'
import type { NetworkVisualizationData, LifeEntityRelationship } from '@/api/types'

// 响应式数据
const graphRef = ref()
const relationshipModalVisible = ref(false)
const selectedRelationship = ref<LifeEntityRelationship | null>(null)

// 演示数据
const demoData = ref<NetworkVisualizationData>({
  nodes: [
    {
      id: '1',
      name: '智能制造企业A',
      type: 'CORPORATE',
      status: 'ACTIVE'
    },
    {
      id: '2',
      name: '智慧城市B',
      type: 'URBAN',
      status: 'ACTIVE'
    },
    {
      id: '3',
      name: '创新概念C',
      type: 'CONCEPTUAL',
      status: 'EVOLVING'
    },
    {
      id: '4',
      name: '个体用户D',
      type: 'INDIVIDUAL',
      status: 'ACTIVE'
    },
    {
      id: '5',
      name: '混合系统E',
      type: 'HYBRID',
      status: 'ACTIVE'
    },
    {
      id: '6',
      name: '核心系统F',
      type: 'SYSTEM',
      status: 'ACTIVE'
    }
  ],
  edges: [
    {
      id: 'e1',
      source: '1',
      target: '2',
      type: 'COLLABORATION',
      strength: 0.8
    },
    {
      id: 'e2',
      source: '2',
      target: '3',
      type: 'DEPENDENCY',
      strength: 0.6
    },
    {
      id: 'e3',
      source: '3',
      target: '4',
      type: 'COMMUNICATION',
      strength: 0.7
    },
    {
      id: 'e4',
      source: '4',
      target: '5',
      type: 'FUSION',
      strength: 0.9
    },
    {
      id: 'e5',
      source: '5',
      target: '6',
      type: 'INHERITANCE',
      strength: 0.5
    },
    {
      id: 'e6',
      source: '6',
      target: '1',
      type: 'COMPETITION',
      strength: 0.4
    }
  ]
})

// 网络统计数据
const networkStatistics = ref({
  totalNodes: 6,
  totalEdges: 6,
  averageDegree: 2,
  networkDensity: 0.4,
  clusteringCoefficient: 0.6,
  connectedComponents: 1,
  averagePathLength: 2.5,
  networkDiameter: 4,
  communities: [
    {
      communityId: 1,
      communityName: '制造生态',
      nodeCount: 3,
      nodeIds: ['1', '2', '6'],
      modularity: 0.45,
      color: '#1890ff'
    },
    {
      communityId: 2,
      communityName: '创新网络',
      nodeCount: 3,
      nodeIds: ['3', '4', '5'],
      modularity: 0.38,
      color: '#52c41a'
    }
  ],
  centralityRankings: [
    {
      nodeId: '1',
      nodeName: '智能制造企业A',
      degreeCentrality: 0.8,
      betweennessCentrality: 0.6,
      closenessCentrality: 0.7,
      eigenvectorCentrality: 0.9,
      rank: 1
    },
    {
      nodeId: '5',
      nodeName: '混合系统E',
      degreeCentrality: 0.7,
      betweennessCentrality: 0.5,
      closenessCentrality: 0.6,
      eigenvectorCentrality: 0.7,
      rank: 2
    }
  ]
})

// 代码示例
const basicUsageCode = `<template>
  <EChartsNetworkGraph
    :data="networkData"
    :width="800"
    :height="600"
    @node-click="handleNodeClick"
    @edge-click="handleEdgeClick"
  />
</template>

<script setup>
import { EChartsNetworkGraph } from '@/components/NetworkGraph'

const networkData = {
  nodes: [
    { id: '1', name: '节点1', type: 'CORPORATE' },
    { id: '2', name: '节点2', type: 'URBAN' }
  ],
  edges: [
    { id: 'e1', source: '1', target: '2', type: 'COLLABORATION', strength: 0.8 }
  ]
}

const handleNodeClick = (node) => {
  console.log('节点点击:', node)
}

const handleEdgeClick = (edge) => {
  console.log('边点击:', edge)
}
</script>`

const advancedUsageCode = `<template>
  <NetworkGraphSelector
    :data="networkData"
    :width="800"
    :height="600"
    :default-library="'g6'"
    :show-performance-monitor="true"
    @library-change="handleLibraryChange"
  />
</template>

<script setup>
import { NetworkGraphSelector } from '@/components/NetworkGraph'

const handleLibraryChange = (library) => {
  console.log('图形库切换:', library)
}
</script>`

const eventHandlingCode = `<script setup>
// 节点交互
const handleNodeClick = (node) => {
  // 处理节点点击
  showNodeDetails(node)
}

const handleNodeDoubleClick = (node) => {
  // 处理节点双击
  focusOnNode(node)
}

// 边交互
const handleEdgeClick = (edge) => {
  // 处理边点击
  showRelationshipDetails(edge)
}

// 选择变化
const handleSelectionChange = (selection) => {
  // 处理选择变化
  updateSelectionInfo(selection)
}

// 路径高亮
const handlePathHighlight = (path) => {
  // 处理路径高亮
  highlightPath(path)
}
</script>`

// 方法
const handleNodeClick = (node: any) => {
  message.info(`点击节点: ${node.name || node.id}`)
  console.log('Node clicked:', node)
}

const handleEdgeClick = (edge: any) => {
  message.info(`点击关系: ${edge.type || edge.relationshipType}`)
  console.log('Edge clicked:', edge)
  
  // 模拟显示关系详情
  selectedRelationship.value = {
    id: edge.id,
    sourceEntityId: edge.source,
    targetEntityId: edge.target,
    relationshipType: edge.type || edge.relationshipType,
    strength: edge.strength,
    description: '演示关系',
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
  relationshipModalVisible.value = true
}

const handleLibraryChange = (library: string) => {
  message.success(`已切换到 ${library} 图形库`)
}

const handleInteractionModeChange = (mode: string) => {
  message.info(`交互模式: ${mode}`)
}

const handleSelectionChange = (selection: any) => {
  const { nodes, edges } = selection
  message.info(`选中 ${nodes.length} 个节点，${edges.length} 个关系`)
}

const handlePathHighlight = (path: string[]) => {
  message.success(`高亮路径: ${path.join(' → ')}`)
}

const handleCommunityHighlight = (communities: any[]) => {
  message.success(`检测到 ${communities.length} 个社区`)
}

const handleRelationshipUpdated = (relationship: LifeEntityRelationship) => {
  message.success('关系更新成功')
  relationshipModalVisible.value = false
}

const handleRelationshipDeleted = (relationshipId: string) => {
  message.success('关系删除成功')
  relationshipModalVisible.value = false
}

onMounted(() => {
  message.info('网络可视化演示页面已加载')
})
</script>

<style scoped>
.network-demo-page {
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.header-content h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  color: #1890ff;
}

.header-content p {
  margin: 0;
  color: #666;
  font-size: 16px;
}

.feature-item {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  font-size: 32px;
  color: #1890ff;
  margin-bottom: 12px;
}

.feature-item h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.feature-item p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

pre {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.45;
}

code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: #24292e;
}

:deep(.ant-card-head-title) {
  font-size: 18px;
  font-weight: 600;
}

:deep(.ant-card-body) {
  padding: 24px;
}

@media (max-width: 768px) {
  .network-demo-page {
    padding: 16px;
  }
  
  .header-content h2 {
    font-size: 24px;
  }
  
  .header-content p {
    font-size: 14px;
  }
  
  .feature-item {
    padding: 16px;
  }
  
  .feature-icon {
    font-size: 24px;
  }
}
</style>